<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul>li{
            list-style-type: none;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>The Goods Page</h1>
    <form>
        <ul>
            <li><input type="hidden" v-model="id"></li>
            <li>name</li>
            <li><input type="text" v-model="name"></li>
            <li>remark</li>
            <li><textarea v-model="remark" rows="3" cols="51"></textarea>></li>
            <li><input type="button" @click="doSaveOrUpdate" value="Save Goods" /></li>
        </ul>
    </form>
    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>remark</th>
            <th>createdTime</th>
            <th>operation</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="g in goods">
            <td>{{g.id}}</td>
            <td>{{g.name}}</td>
            <td>{{g.remark}}</td>
            <td>{{g.createdTime}}</td>
            <td><a @click="doDeleteById(g.id)">删除</a></td>
            <td><a @click="doUpdateById(g.id)">修改</a></td>
        </tr>
        </tbody>
    </table>
</div>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
    var config={
        el:"#app",
        data:{
            name: "",
            remark: "",
            id: "",
            goods: {}
        },
        methods:{
            doUpdateById: function (id) {
                let url = `goods/doFindById/${id}`;
                axios.get(url).then(function (result) {
                    console.log(result.data);
                    this.vue.id = result.data.id;
                    this.vue.name = result.data.name;
                    this.vue.remark = result.data.remark;
                });
            },
            doSaveOrUpdate: function () {

                let url = this.id?"goods/doUpdateGoods":"goods/doSaveGoods";
                var params = {"id":this.id,"name":this.name,"remark":this.remark};
                console.log(params);
                axios.post(url,params).then(function (result) {
                    alert(result.data);
                    this.vue.doFindGoods();
                    this.vue.id="";
                    this.vue.name="";
                    this.vue.remark="";
                });

            },
            doDeleteById: function (id) {
                let url = "goods/doDeleteById/"+id;
                axios.get(url).then(function (result) {
                    alert(result.data);
                    vue.doFindGoods();
                });
            },
            doFindGoods: function () {
                debugger;
                let url = "/goods/doFindGoods";
                axios.get(url).then(function(result){
                    console.log(result.data);
                    this.vue.goods=result.data;
                })
            }
        },
        mounted: function () {
            this.doFindGoods();
        }
    };
    var vue = new Vue(config);
</script>
</body>
</html>